<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10_jQuery-架构的设计图</title>
  </head>
  <body>
    <script>
      // 立即执行函数（避免与全局变量冲突）
      (function (global, factory) {
        factory(global);
      })(window, function (window) {
        function createjQuery(selector) {
          return new createjQuery.fn.init(selector);
        }

        // createjQuery的原型方法
        createjQuery.prototype = {
          constructor: createjQuery,
          extend: function () {
            console.log("extend");
          },
          text: function () {
            console.log("text");
          },
          ready: function () {
            console.log("ready");
          },
        };

        // 类方法
        createjQuery.noConflict = function () {
          console.log("noConflict");
        };
        createjQuery.isArray = function () {
          console.log("isArray");
        };
        createjQuery.map = function () {
          console.log("map");
        };

        createjQuery.fn = createjQuery.prototype;

        // 构造函数(创建jQuery对象)
        createjQuery.fn.init = function (selector) {
          if (!selector) {
            return this;
          }

          // 拿到DOM Element 源码
          const el = document.querySelector(selector);
          this[0] = el;
          this.length = 1;
          return this;
        };

        // createjQuery的原型方法
        createjQuery.fn.init.prototype = createjQuery.fn;
        // 将createjQuery挂载到window对象上
        window.$ = window.createjQuery = createjQuery;
      });
    </script>
    <script>
      console.log("$O", createjQuery);
      console.log("$O", createjQuery("body"));
    </script>
  </body>
</html>
